<template>
    <div>
        <el-card style="">
          <div style="display: flex;justify-content: space-between;">
              <div style="font-size: 24px;font-weight: bold;">用户信息</div>
              <!-- <div><el-button type="primary" @click="dialog_add = true">+ 添加</el-button></div> -->
          </div>
          <div style="margin-top: 30px;">
              <el-table :data="dataList" style="width: 100%">
                <el-table-column type="index" width="60" label="序号" align="center" />
                <el-table-column prop="userName" label="姓名" align="center" />
                <el-table-column prop="userPhone" label="联系方式" align="center" />
                <el-table-column prop="userEmail" label="电子邮箱" align="center" />
                <el-table-column prop="createTime" label="提交日期" align="center" />
                <el-table-column prop="remark" label="备注" align="center" />
              </el-table>
          </div>
        </el-card>
    </div>
  </template>
  
  <script setup lang="ts">
    import '@wangeditor/editor/dist/css/style.css' // 引入 css
    import { onBeforeUnmount, shallowRef,onMounted,ref } from 'vue'
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    import { ElMessage } from 'element-plus'
    import { Plus } from '@element-plus/icons-vue'
    import type { UploadProps } from 'element-plus'
    import { $UserList } from '../../api/base'

    onMounted(()=>{
      loadList()
    })
    
    let dataList = ref([])

    const loadList = async ()=>{
      // console.log(form.value)
      let ret = await $UserList()
      console.log(ret)
      dataList.value = ret.rows
    }

    const imageUrl = ref('')

    const handleAvatarSuccess: UploadProps['onSuccess'] = (
      response,
      uploadFile
    ) => {
      imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    }

    const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
      if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
      }
      return true
    }

    let dialog_add = ref(false)
    let addForm = ref({})

    const addorRef = shallowRef()
    const addorConfig = { placeholder: '请输入内容...' }
    const handleCreated1 = (editor) => {
      addorRef.value = editor // 记录 editor 实例，重要！
    }

    const editorRef = shallowRef()
    const editorConfig = { placeholder: '请输入内容...' }
    const handleCreated2 = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }
  </script>
  
  <style scoped lang="less">
  .avatar-uploader .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  </style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
</style>